<template>
  <j-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-select
      show-search
      v-model="value"
      placeholder="请选择需要绑定的用户"
      style="width: 100%; margin-bottom: 15px"
      :default-active-first-option="false"
      :show-arrow="false"
      :filter-option="false"
      :not-found-content="null"
      @search="handleSearch"
      @change="handleChange"
    >
      <a-select-option v-for="d in datas" :key="d.id">
        {{ d.username }}
      </a-select-option>
    </a-select>

    <a-spin :spinning="confirmLoading">
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-spin>
  </j-modal>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { httpAction, getAction } from '@/api/manage'
import Area from '@/components/_util/Area'
import mapDialog from '../component/map.vue'
import { async } from 'q'

export default {
  name: 'XhdjAgencyModal',
  mixins: [JeecgListMixin],
  components: {
    mapDialog,
  },
  data() {
    return {
      title: '操作',
      visible: false,
      previewVisible: false,
      isAdminFlag: false,
      statusFlag: false,
      model: {},
      confirmLoading: false,
      value: '',
      datas: [],
      // 表头
      columns: [
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'realname',
        },
        {
          title: '绑定后台登录用户',
          align: 'center',
          dataIndex: 'roleName',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        list: '/xhdjAgencyStaff/newList',
        delete: '/xhdjAgencyStaff/delete',
        add: 'xhdjAgencyStaff/add',
        edit: '/xhdjAgency/edit',
        zdgGet: '/sys/user/queryList',
      },
    }
  },
  created() {},
  methods: {
    add() {
      //初始化默认值
      this.edit({})
    },
    edit(record) {
      this.value = ''
      this.queryParam.agencyCode = record.agencyCode
      this.loadData()
      this.model = Object.assign({}, record)
      this.visible = true
    },
    handleSearch(username) {
      getAction(this.url.zdgGet, { username }).then((res) => {
          if (res) {
            this.datas = res.result
            this.$forceUpdate()
          }
        })
    },
    close() {
      this.$emit('close')
      this.visible = false
      // this.$refs.form.clearValidate()
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    handleChange({ fileList }) {
      this.fileList = fileList
    },
    userClick() {
      console.log(this.selectedRowKeys, this.selectionRows)
    },
    handleOk() {
      const that = this
      that.model = {
        agencyCode: that.queryParam.agencyCode,
        sysUserId: this.value,
      }
      // 触发表单验证
      that.confirmLoading = true
      let httpurl = ''
      let method = ''
      if (!this.model.id) {
        httpurl += this.url.add
        method = 'post'
      } else {
        httpurl += this.url.edit
        method = 'put'
      }
      if (this.dataSource && this.dataSource.length == 0) {
        httpAction(httpurl, this.model, method)
        .then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            that.$emit('ok')
          } else {
            that.$message.warning(res.message)
          }
        })
        .finally(() => {
          that.confirmLoading = false
          that.close()
        })
      } else {
        that.confirmLoading = false
        this.$message.error('只能绑定一个用户')
      }
      
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>

<style lang="less" scoped>
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
